<template>
	<view class="page">
		<view class="head">
			<view class="head1">
				<text class="iconfont icon-fenxiang1"  @click="goBack"></text>
				<text class="nav-title">{{store.name}}</text>
				
			</view>
		</view>
	
			<view class="main" v-show="classifyShow===0">
				<view class="banner">
					
							<image :src="store.img" mode="aspectFill"></image>
						
					</swiper>
				</view>
				<!-- 商品 -->
				<view class="store">
					<view class="detail2" >
						<image :src="store.img" mode=""></image>
						
						<view class="right">
							<view class="title">
								<view class="left">
									{{store.name}}
								</view>
								<view class="icon">
									<view class="icon-info" @click.stop="collect" >
										<text class="iconfont icon-shoucang1" :style="{color: iscollect ?  '#ffdf11':'#646464',}"></text>
										<view class="dingwei" >收藏</view>
									</view>
									<view class="icon-info" @click="share1">
										<text class="iconfont icon-fenxiang"></text>
										<view class="dingwei">转发</view>
									</view>
								</view>	
							</view>
							<view class="detail">
								<view class="time">
									营业中 {{store.time}}
								</view>
								<view class="price">
									{{store.price}}/人
								</view>
							</view>
						</view>
					</view>
					
					<view class="detail1">
						<view class="left">
							<view class="address">
								<view class="icon-info" >
									<view class="dingwei">{{store.location}}</view>
									<text class="iconfont icon-more"></text>
									
								</view>
								<view class="icon-info" >
									<text class="iconfont icon-dingwei"></text>
									<view class="dingwei">{{store.distance}}</view>
									
									
								</view>
								
							</view>
							
							
						</view>
						<view class="right">
							<view class="icon-info" >
								<view class="icon">
									<text class="iconfont icon-jiache"></text>
								</view>
								<view class="dingwei">驾车</view>
							</view>
							<view class="icon-info" @click="phone" >
								<view class="icon">
								<text class="iconfont icon-dianhua"></text>
								</view>
								<view class="dingwei">电话</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="title1">
					<view class="left">
						推荐单品
					</view>
					<view class="icon-info" @click="menu">
					
						<view class="dingwei">更多</view>
							<text class="iconfont icon-more"></text>
					</view>
				</view>
				<view class="menu">
						<view class="image" v-for="(item,index) in storeList" :key="index" >
							<image :src="item.img" mode=""></image>
							<text>{{item.title}}</text>
						</view>
				</view>
				<view class="title1">
					<view class="left">
						商品评价
					</view>
					<view class="icon-info" @click="appraise" >
					
						<view class="dingwei">更多</view>
							<text class="iconfont icon-more"></text>
					</view>
				</view>
				<view class="appraise">
					<view class="appraise-content">
						<image src="https://tse1-mm.cn.bing.net/th/id/OIP-C.LO6625C8g41ovz21idvhOgAAAA?w=206&h=206&c=7&r=0&o=5&pid=1.7" mode=""></image>
					</view>
					<view class="content">
						<view class="top" >
								匿名用户
							</view>
						
						<view class="center">
							环境很好，服务态度很好
						</view>
						<view class="bottom">
							<view class="address">
								IP：赤峰市  ·红山区
							</view>
							<view class="date">
								2024-05-06
							</view>
						</view>
						<view class="border">
							
						</view>
					</view>
				</view>
				<view class="title1">
					<view class="left">
						更多推荐
					</view>
					<view class="icon-info" >
					
						<view class="dingwei">更多</view>
							<text class="iconfont icon-more"></text>
					</view>
				</view>
				<!-- @click="store1" -->
				<view class="recommend"  v-for="(item,index) in storeList1" :key="index" >
					<view class="recommend-content">
						<image :src="item.logo" mode=""></image>
						
						
							<view class="user" >
								<view class="top">
									<view class="left">
										{{item.name}}
									</view>
									<view class="right">
										{{item.distance}}
									</view>
								</view>
								<view class="bottom">
									<view class="left">
										{{item.type}}
									</view>
									<view class="center">
										|
									</view>
									<view class="right">
										{{item.region}}
									</view>
								</view>
							</view>
						
						
					</view>
					</view>
			</view>	
	</view>
</template>

<script>
	export default{
		data(){
			return{
				store:{},
				storeList: [],
				storeList1: [
				  {
				    logo: 'https://pic.nximg.cn/file/20230914/33760392_161909340127_2.jpg',
				    name: '杭州特色小笼包(赤峰红山区)',
					type:'早餐',
					distance:'5.9km',
					region:'长青街长青公园南口东走50米',
					
				  },
				  {
				    logo: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.qRz6NYTvrqn23mjgR1GUkwHaE8?w=257&h=180&c=7&r=0&o=5&pid=1.7',
				    name: '北京老北京炸酱面',
					type:'早餐',
					distance:'3.9km',
					region:'钢铁大街南口东走50米',
				  },
				  {
				    logo: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.aJeK_HFXapSh1Q71AW29ngHaE8?w=263&h=180&c=7&r=0&o=5&pid=1.7',
				    name: '李二烧烤',
					type:'烧烤',
					distance:'0.9km',
					region:'桥北街道南口东走50米',
				  },
				  {
				    logo: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.erhPYZ6AJKoXhK3HQ3-8CgHaE8?w=277&h=185&c=7&r=0&o=5&pid=1.7',
				    name: '四川麻辣火锅',
					type:'火锅',
					distance:'0.9km',
					region:'昭乌达小区东走50米',
				  },
				  {
				    logo: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.GmPhy9VPQ_htqErsGSc-ngHaE8?w=220&h=180&c=7&r=0&o=5&pid=1.7',
				    name: '武汉热干面',
					type:'面食',
					distance:'19km',
					region:'昭乌达小区东走50米',
				  },
				  {
				    logo: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.Cpfbgsjb_Ams72ksnWGIMAHaE8?w=287&h=192&c=7&r=0&o=5&pid=1.7',
				    name: '南京盐水鸭',
					type:'熟食',
					distance:'9km',
					region:'桥北街道南口东走50米',
				  }
				],

				
				classifyShow: 0,
				iscollect:false,
			}
		},
		// 在目标页面的生命周期函数中获取数据
		onLoad() {
		    const itemDetail = uni.getStorageSync('itemDetail');
		    console.log('111',itemDetail);  // 这里将显示存储的 item 数据
			if(itemDetail.detail){
				this.store=itemDetail.detail;
				this.storeList=itemDetail.detail.singleList;
			}else{
				this.store=itemDetail;
				this.storeList=itemDetail.singleList;
			}
			// itemDetail
		},

		methods:{
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback(){
				// setTimeout(() =>{
				//  this.mescroll.endSuccess();
				// },2000)
			  
			},
			store1(){
				   uni.navigateTo({
				   		url:'/moduleA/recommendation/store/index'
				   })
			},
			/*上拉加载的回调*/
			upCallback(page) {
			  setTimeout(() =>{
			    this.mescroll.endByPage(10, 20);
			  },2000)
			},
			share1(){
				console.log(222)
			},
			phone(){
				wx.makePhoneCall({
				  phoneNumber:this.store.phone
				})
			},
			goBack(){
						  uni.navigateBack(-1)
			},
			////收藏
			collect(){
				this.iscollect=!this.iscollect;
			},
			menu(){
				console.log('111')
				uni.navigateTo({
					url:'/moduleA/recommendation/store/recommend/index'
				})
			},
			appraise(){
				uni.navigateTo({
					url:'/moduleA/recommendation/store/appraise/index'
				})
				
			}
		},
		
	}
</script>

<style scoped lang="scss">
	@import 'store.scss';
	  
</style>